<template>
	<view class="content">
		<view class="header">
			<view class="bg">
				<image class="bg-img" src="../../static/bg.png"></image>
			</view>
			<view class="info">
				<view class="txt">
					本月实发金额
				</view>
				<view class="money">
					<view class="unit">￥</view>
					<view class="num">{{total}}</view>
				</view>
			</view>
		</view>
		<view class="contents">
			<view class="list"  :key="item" v-for="(item) in data" >
				<view class="title" v-if="item.name">
					<view class="ico"></view>
					<view class="title-name">{{ item.name }}</view>
				</view>
				<view class="content-list" v-for="item1 in item.child">
					<view class="content-list-left">
						{{ item1.name }}
					</view>
					<view class="content-list-right">
						{{item1.value}}
					</view>
				</view>
			</view>
			<view class="place"></view>
		</view>
	</view>
</template>

<script>
	import {
		salaryInfo,
		salaryInfonew
	} from '@/api/salary.js'
	export default {
		data() {
			return {
				id:"",
				userInfo:{}, 
				// datas:{"total":8000,"info":[{"child":[{"name":"试用期","value":500},{"name":"岗位工资","value":"0.00"},{"name":"薪级工资","value":"0.00"}],"name":"全国\n工资"},{"child":[{"name":"小计1","value":"0.00"}],"name":""},{"child":[{"name":"特区津贴","value":"0.00"},{"name":"基础津贴","value":"0.00"}],"name":"基础性绩效工资"},{"child":[{"name":"岗位津贴","value":"0.00"}],"name":""},{"child":[{"name":"小计2","value":"0.00"}],"name":""},{"child":[{"name":"教护特薪生活津贴","value":900},{"name":"教护龄津贴","value":"0.00"},{"name":"独生子女费","value":"0.00"}],"name":"其他"},{"child":[{"name":"月工资小计","value":"0.00"}],"name":""},{"child":[{"name":"保留部分","value":"0.00"},{"name":"课时","value":"0.00"},{"name":"剩余绩效分配","value":"0.00"},{"name":"职务","value":"0.00"},{"name":"上调1360","value":300},{"name":"考勤减扣  ","value":"0.00"},{"name":"课时补发（扣）","value":"0.00"},{"name":"职务补助补发（扣）","value":"0.00"}],"name":"奖励性绩效工资"},{"child":[{"name":"奖励性绩效小计","value":"0.00"}],"name":""},{"child":[{"name":"补发（扣）工资","value":"0.00"}],"name":""},{"child":[{"name":"应发工资合计","value":"0.00"}],"name":""},{"child":[{"name":"扣公积金（个人）","value":"0.00"}],"name":""},{"child":[{"name":"补扣公积金  （个人）","value":"0.00"}],"name":""},{"child":[{"name":"扣医疗（个人）","value":"0.00"}],"name":""},{"child":[{"name":"补扣医疗（个人）","value":"0.00"}],"name":""},{"child":[{"name":"扣养老（个人）","value":"0.00"}],"name":""},{"child":[{"name":"补扣养老（个人）","value":"0.00"}],"name":""},{"child":[{"name":"扣职业年金（个人）","value":"0.00"}],"name":""},{"child":[{"name":"补扣职业年金（个人）","value":"0.00"}],"name":""},{"child":[{"name":"扣款小计","value":"0.00"}],"name":""},{"child":[{"name":"合计","value":"0.00"}],"name":""},{"child":[{"name":"费用\n减除\n额","value":"0.00"}],"name":""},{"child":[{"name":"应纳税\n所得","value":900}],"name":""},{"child":[{"name":"税率","value":"0.00"}],"name":""},{"child":[{"name":"个税","value":200}],"name":""},{"child":[{"name":"补个税","value":"0.00"}],"name":""},{"child":[{"name":"实发金额","value":"0.00"}],"name":""},{"child":[{"name":"两贴","value":200}],"name":""},{"child":[{"name":"基层补贴","value":"0.00"}],"name":""},{"child":[{"name":"班主任补贴","value":"0.00"}],"name":""},{"child":[{"name":"职级制津贴","value":"0.00"},{"name":"特级教师津贴","value":"0.00"},{"name":"基础绩效奖","value":"0.00"},{"name":"房补","value":"0.00"}],"name":null},{"child":[{"name":"总计","value":8000}],"name":""}],"userInfo":{"avatar":"https:\/\/wework.qpic.cn\/wwpic\/189017_IwbY3MPvQpeKzCz_1664966787\/0","name":"左千户","subject":"","teaching_subject":"","department":""}},
				total:"",
				data:"",
			}
		},
		onShow(){
			this.salaryInfoFn()
		},
		onLoad(option) {
			this.id = option.id

		},
		methods: {
			salaryInfoFn(){
				salaryInfonew({
					id:this.id
				}).then(res=>{
					if(res.code == 1){
						this.total = res.data.total
						this.data = res.data.info
						this.userInfo = res.data.userInfo
					}
				})
			},
		}
	}
</script>

<style scoped>
	.header{
		padding:21rpx 30rpx;
		position: relative;
	}
	.content {
		background:#f8f8f8 ;
		/* height: 100vh; */
	}
	.bg{
		width: 100%;
		height: 238rpx;
	}
	.info{
		position: absolute;
		top: 75rpx;
		left: 60rpx;
		color: #fff;
		
	}
	.txt{
		font-size: 32rpx;
	}
	.unit{
		font-size: 24rpx;
		/* line-height: -30rpx; */
		line-height: 70rpx;
	}
	.num{
		font-size: 43rpx;
	}

	.money{
		margin-top: 30rpx;
		display: flex;
		/* line-height: 30rpx; */
		/* align-items: flex-end; */
	}
	.bg-img{
		width: 100%;
		height: 100%;
	}
	.header{
		
	}
	.contents{
		padding:0 30rpx 30rpx;

	}
	.list{
		/* width: 100%; */
		background: #fff;
		padding: 20rpx;
		border-radius: 15rpx;
		margin-top: 20rpx;
	}
	.title{
		display: flex;
		align-items: center;
	}
	.ico{
		width: 4rpx;
		height: 30rpx;
		background:#047AD2;
		border-radius: 0px 3px 3px 0px;
	}
	.title-name{
		margin-left: 20rpx;
		font-size: 24rpx;
	}
	.content-list{
		display: flex;
		justify-content: space-between;
		color: #838488;
		font-size: 24rpx;
		margin-top: 20rpx;

	}
	.place{
		width: 100%;
		height: 20rpx;
	}
</style>
